<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel" :footerBtnAlign="true">
        <rx-layout>
            <div slot="center">
                <a-form>
                    <a-row>
                        <a-col :span="12">
                            <a-form-item :labelCol="{span:8}" :wrapperCol="{span:16}" :label="i18n('list.formSolution','表单方案')">
                                <rx-input-button v-model="formSolution"
                                                 @click="showFormSolution"
                                                 style='width: 238px;'
                                >
                                </rx-input-button>
                            </a-form-item>
                        </a-col>

                        <a-col :span="12">
                            <a-form-item :labelCol="{span:8}" :wrapperCol="{span:16}" :label="i18n('formDialog.readonly','是否只读')">
                                <a-checkbox v-model="readOnly"></a-checkbox>
                            </a-form-item>
                        </a-col>
                    </a-row>

                    <a-row v-if="formSolution">
                        <a-col :span="24">
                            <a-form-item :labelCol="{span:4}" :wrapperCol="{span:20}" :label="i18n('form.tableMaster','主表')">
                                <a-row>
                                    <a-col :span="24">
                                        <div style="text-align: right;">
                                            <a-button-group >
                                                <a-button type="primary" @click="addFields('main')">
                                                    <a-icon type="plus"></a-icon>
                                                </a-button>
                                                <a-button @click="removeFields('main')">
                                                    <a-icon type="minus"></a-icon>
                                                </a-button>
                                            </a-button-group>
                                        </div>
                                    </a-col>
                                </a-row>
                                <a-form-item>
                                    <a-table :dataSource="mainFields" :pagination="false" :rowSelection="rowSelection"
                                             rowKey="idx_">
                                        <a-table-column :title="i18n('formDialog.bindField','绑定字段')" dataIndex="bindField" width="150px">
                                            <template slot-scope="text, record">
                                                <a-select style="width: 120px;" v-model="record.bindField" :options="mainFieldsMap" @change="bindFieldChange(record)"
                                                          :getPopupContainer="p=>p.parentNode">
                                                </a-select>
                                            </template>
                                        </a-table-column>
                                        <a-table-column :title="i18n('form.sourceField','源字段')" dataIndex="returnField" width="300px">
                                            <template slot-scope="text, record">
                                                <div v-if="record.assign!='json'">
                                                    <a-select style="width: 150px;" v-model="record.returnField"  :options="originalMainFields"
                                                              @change="returnFieldChange(record,mainFieldsMap,originalMainFields)"
                                                              :getPopupContainer="p=>p.parentNode" allowClear>
                                                    </a-select>
                                                </div>
                                                <div v-else>
                                                    <a-row>
                                                        <a-col :span="12" style="margin-left: -21px">
                                                            {{i18n('customDialog.value','值')}}:
                                                            <a-select style="width: 150px;" v-model="record.returnField"  :options="originalMainFields"
                                                                      @change="returnFieldChange(record,mainFieldsMap,originalMainFields)"
                                                                      :getPopupContainer="p=>p.parentNode" allowClear>
                                                            </a-select>
                                                        </a-col>
                                                        <a-col :span="12">
                                                            {{i18n('customDialog.text','文本')}}:
                                                            <a-select style="width: 150px;" v-model="record.returnFieldLabel" :options="originalMainFields"
                                                                      :getPopupContainer="p=>p.parentNode" allowClear>
                                                            </a-select>
                                                        </a-col>
                                                    </a-row>
                                                </div>
                                            </template>
                                        </a-table-column>
                                    </a-table>
                                </a-form-item>
                            </a-form-item>
                        </a-col>
                    </a-row>

                    <a-row v-if="subFieldsMap && subFieldsMap.length>0">
                        <a-col :span="24">
                            <a-form-item v-for="(sub,index) in subFieldsMap" :labelCol="{span:4}" :wrapperCol="{span:20}" :label="sub.name">
                                <a-row>
                                    <a-col :span="24">
                                        <div style="text-align: right;">
                                            <a-button-group >
                                                <a-button type="primary" @click="addFields(sub.type,sub.alias)">
                                                    <a-icon type="plus"></a-icon>
                                                </a-button>
                                                <a-button @click="removeFields('sub',sub.alias)">
                                                    <a-icon type="minus"></a-icon>
                                                </a-button>
                                            </a-button-group>
                                        </div>
                                    </a-col>
                                </a-row>
                                <a-form-item>
                                    <a-table :dataSource="subFields[sub.alias]" :pagination="false" :rowSelection="subRowSelection" rowKey="idx_">
                                        <a-table-column :title="i18n('formDialog.bindField','绑定字段')" dataIndex="bindField" width="100px">
                                            <template slot-scope="text, record">
                                                <a-select style="width: 120px;" v-model="record.bindField" :options="sub.fields"
                                                          @change="bindFieldChange(record,sub.alias,sub.fields)"
                                                          :getPopupContainer="p=>p.parentNode">
                                                </a-select>
                                            </template>
                                        </a-table-column>
                                        <a-table-column :title="i18n('form.sourceField','源字段')" dataIndex="returnField" width="350px">
                                            <template slot-scope="text, record">
                                                <!--一对一子表-->
                                                <div class="Form-onetoone" v-if="sub.type=='onetoone'">
                                                    <div>
                                                        <a-select v-model="record.table" style="width: 160px;margin-right: 5px;" >
                                                            <a-select-option value="main">{{i18n('form.tableMaster','主表')}}</a-select-option>
                                                            <a-select-option  v-for="(table) in onetooneTables" :value="table.alias">{{table.name}}</a-select-option>
                                                        </a-select>
                                                    </div>
                                                    <!--主表-->
                                                    <div  v-if="record.table=='main'">
                                                        <div v-if="record.assign!='json'">
                                                            <a-select style="width: 150px;" v-model="record.returnField"  :options="originalMainFields"
                                                                      @change="returnFieldChange(record,sub.fields,originalMainFields)"
                                                                      :getPopupContainer="p=>p.parentNode" allowClear>
                                                            </a-select>
                                                        </div>
                                                        <div v-else>
                                                            <a-row>
                                                                <a-col :span="12" style="margin-left: -21px">
                                                                    {{i18n('customDialog.value','值')}}:
                                                                    <a-select style="width: 150px;" v-model="record.returnField"  :options="originalMainFields"
                                                                              @change="returnFieldChange(record,sub.fields,originalMainFields)"
                                                                              :getPopupContainer="p=>p.parentNode" allowClear>
                                                                    </a-select>
                                                                </a-col>
                                                                <a-col :span="12">
                                                                    {{i18n('customDialog.text','文本')}}:
                                                                    <a-select style="width: 150px;" v-model="record.returnFieldLabel"  :options="originalMainFields"
                                                                              :getPopupContainer="p=>p.parentNode" allowClear>
                                                                    </a-select>
                                                                </a-col>
                                                            </a-row>
                                                        </div>
                                                    </div>

                                                    <!--子表-->
                                                    <div v-else>
                                                        <div v-if="record.assign!='json'">
                                                            <a-select style="width: 150px;" v-model="record.returnField"  :options="subTableFields[record.table]"
                                                                      @change="returnFieldChange(record,sub.fields,subTableFields[record.table])"
                                                                      :getPopupContainer="p=>p.parentNode" allowClear>
                                                            </a-select>
                                                        </div>
                                                        <div v-else>
                                                            <a-row>
                                                                <a-col :span="12" style="margin-left: -21px">
                                                                    {{i18n('customDialog.value','值')}}:
                                                                    <a-select style="width: 150px;" v-model="record.returnField"  :options="subTableFields[record.table]"
                                                                              @change="returnFieldChange(record,sub.fields,subTableFields[record.table])"
                                                                              :getPopupContainer="p=>p.parentNode" allowClear>
                                                                    </a-select>
                                                                </a-col>
                                                                <a-col :span="12">
                                                                    {{i18n('customDialog.text','文本')}}:
                                                                    <a-select style="width: 150px;" v-model="record.returnFieldLabel"  :options="subTableFields[record.table]"
                                                                              :getPopupContainer="p=>p.parentNode" allowClear>
                                                                    </a-select>
                                                                </a-col>
                                                            </a-row>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!--一对多子表-->
                                                <div class="Form-onetoone" v-if="sub.type=='onetomany'" >
                                                    <div>
                                                        <a-select v-model="record.table" style="width: 160px;margin-right: 5px;" >
                                                            <a-select-option  v-for="table in onetomanyTables" :value="table.alias">{{table.name}}</a-select-option>
                                                        </a-select>
                                                    </div>

                                                    <div v-if="record.assign!='json'">
                                                        <a-select style="width: 150px;" v-model="record.returnField" :options="subTableFields[record.table]"
                                                                  @change="returnFieldChange(record,sub.fields,subTableFields[record.table])"
                                                                  :getPopupContainer="p=>p.parentNode" allowClear>
                                                        </a-select>
                                                    </div>
                                                    <div v-else>
                                                        <a-row>
                                                            <a-col :span="12" style="margin-left: -21px">
                                                                {{i18n('customDialog.value','值')}}:
                                                                <a-select style="width: 150px;" v-model="record.returnField" :options="subTableFields[record.table]"
                                                                          @change="returnFieldChange(record,sub.fields,subTableFields[record.table])"
                                                                          :getPopupContainer="p=>p.parentNode" allowClear>
                                                                </a-select>
                                                            </a-col>
                                                            <a-col :span="12">
                                                                {{i18n('customDialog.text','文本')}}:
                                                                <a-select style="width: 150px;" v-model="record.returnFieldLabel" :options="subTableFields[record.table]"
                                                                          :getPopupContainer="p=>p.parentNode" allowClear>
                                                                </a-select>
                                                            </a-col>
                                                        </a-row>
                                                    </div>
                                                </div>
                                            </template>
                                        </a-table-column>
                                    </a-table>
                                </a-form-item>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </rx-layout>
    </rx-dialog>
</template>


<script>
import {Util, GridMixin, Dialog, RxDialog, RxInputButton, RxLayout} from "@lowcode/jpaas-common-lib";
import DialogBox from "@/assets/js/DialogBox";
import FormBoDefApi from "@/api/form/bo/formBoDef";
export default {
    name: "form-mobile-setting",
    components: {
        RxDialog,
        RxInputButton,
        RxLayout
    },
    props: {
        layerid: String,
        lydata: Object,
        destroy: Function,
        setting:Object,
        originalMainFields:{
            type:Array,
            default:[]
        },
        originalSubFields:{
            type:Array,
            default:[]
        }
    },
    mixins: [GridMixin],
    computed: {
        rowSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange
            }
        },
        subRowSelection() {
            return {
                selectedSubRowKeys: this.selectedSubRowKeys,
                onChange: this.onSelectSubChange
            }
        },
    },
    data() {
        return {
            formSetting:{},
            selectedRowKeys: [],
            selectedSubRowKeys: [],
            formSolution:"",
            readOnly:false,
            //主表所有字段
            mainFields:[],
            //子表所有字段配置
            subFields:{},

            mainFieldsMap:[],
            subFieldsMap:[],
            //存放一对一子表
            onetooneTables:[],
            //存放一对多子表
            onetomanyTables:[],
            //存放子表的所有字段
            subTableFields:{}
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formBoList",key);
        },
        //初始化
        init(){
            //初始化一对一子表
            if(this.originalSubFields){
                for (var i = 0; i < this.originalSubFields.length; i++) {
                    if(this.originalSubFields[i].type=="onetoone"){
                        this.onetooneTables.push(this.originalSubFields[i]);
                    }else {
                        this.onetomanyTables.push(this.originalSubFields[i]);
                    }
                    this.subTableFields[this.originalSubFields[i].alias]=this.originalSubFields[i].fields
                }
            }
            if(this.setting){
                this.formSetting=JSON.parse(JSON.stringify(this.setting));
                this.formSolution=this.formSetting.formSolution;
                if(this.formSolution){
                    this.getByBoDefId(JSON.parse(this.formSolution).bodefId);
                }
                this.readOnly=this.formSetting.readOnly?this.formSetting.readOnly:false;
            }
            this.mainFields=this.setting.mainFields||[];
            this.subFields=this.setting.subFields||{};
        },
        //选择表单方案
        showFormSolution(vm){
            var self=this;
            var config = {curVm: this, widthHeight: ['800px', '600px'], data: {multiSelect: false},zIndex: 999,};
            DialogBox.openSoution(config, function (data) {
                vm.setVal(data.alias, data.name)
                self.formSolution=JSON.stringify({
                    text: data.name,
                    value: data.alias,
                    bodefId:data.bodefId
                })
                self.getByBoDefId(data.bodefId);
            })
        },
        //新增
        addFields(type,alias) {
            //assign 直接赋值:direct 取value:value 转为json:json
            var obj = {
                bindField:"",
                returnField:"",
                returnFieldLabel:"",
                idx_: Util.randomId(),
                assign:"direct",
                type:type
            }
            //主表
            if("main"==type){
                this.mainFields.push(obj);
            }else {
                var fields=[]
                if(this.subFields[alias]){
                    fields=this.subFields[alias];
                }
                fields.push(obj);
                this.$set(this.subFields,alias,fields);
            }
        },
        //删除
        removeFields(type,alias) {
            if("main"==type){
                this.removeRows(this.mainFields, this.selectedRowKeys);
            }else {
                this.removeRows(this.subFields[alias], this.selectedSubRowKeys);
            }
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys;
        },
        onSelectSubChange(selectedSubRowKeys) {
            this.selectedSubRowKeys = selectedSubRowKeys;
        },
        handleSubmit() {
            this.formSetting.formSolution=this.formSolution;
            this.formSetting.readOnly=this.readOnly;
            this.formSetting.mainFields=this.mainFields;
            this.formSetting.subFields=this.subFields;
            Util.closeWindow(this, "ok",this.formSetting);
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        getByBoDefId(boDefId){
            if(boDefId){
                FormBoDefApi.getBoJson(boDefId).then(res=>{
                    if(res.success){
                        var boEnt = res.data.boEnt;
                        //主表字段
                        var mainFieldsMap= boEnt.boAttrList.map(function (item) {
                            return {
                                label: item.comment,
                                key: item.name,
                                isSingle:item.isSingle
                            }
                        });
                        this.mainFieldsMap=mainFieldsMap;
                        //子表字段
                        var subFieldsMap=[];
                        if(boEnt.boEntityList){
                            for (var i = 0; i < boEnt.boEntityList.length; i++) {
                                var subEnt = boEnt.boEntityList[i];
                                var obj={};
                                obj.alias=subEnt.alias;
                                obj.name=subEnt.name;
                                obj.type=subEnt.boRelation.type
                                obj.fields =subEnt.boAttrList.map(function (item) {
                                    return {
                                        label: item.comment,
                                        key: item.name,
                                        isSingle:item.isSingle
                                    }
                                });
                                subFieldsMap.push(obj);
                            }
                        }
                        this.subFieldsMap=subFieldsMap;
                    }
                })
            }
        },
        bindFieldChange(record){
            record.returnField="";
            record.returnFieldLabel="";
            record["assign"]="direct";
        },
        /**
         *
         * @param record 当前行
         * @param bindOptions 绑定字段选项
         * @param returnOptions 源字段选项
         */
        returnFieldChange(record,bindOptions,returnOptions){
            //assign 直接赋值:direct 取value:value 转为json:json
            if(record.bindField && record.returnField ){
                var bindIsSingle="single"; //绑定字段是否单值
                for (let i = 0; i <bindOptions.length ; i++) {
                    if(bindOptions[i].key==record.bindField){
                        bindIsSingle=bindOptions[i].isSingle;
                        break;
                    }
                }
                var returnIsSingle="single"; //源字段是否单值
                for (var j = 0; j <returnOptions.length ; j++) {
                    if(returnOptions[j].key==record.returnField){
                        returnIsSingle=returnOptions[j].isSingle;
                        break;
                    }
                }
                //绑定字段为多值 源字段为单值 则需要配置两个值
                if(bindIsSingle==0 && returnIsSingle==1 ){
                    record.assign="json";
                }
                //绑定字段为单值值 源字段为双值 则取value
                else if(bindIsSingle==1 && returnIsSingle==0) {
                    record.assign="value";
                }
                else {
                    record.assign="direct";
                }
            }
        }
    },
    watch: {
        formSolution:function (val){
            if(!val){
                //主表表所有字段配置
                this.mainFields=[]
                //子表所有字段配置
                this.subFields={};
            }
        }
    }
}
</script>

<style scoped>
.Form-onetoone{
    display: flex;
}
.Form-onetoone >div:nth-child(1){
    width: 200px;
}
.Form-onetoone >div:nth-child(2){
    flex: 1;
}
</style>